<!--
 * @Author: your name
 * @Date: 2020-12-08 17:33:40
 * @LastEditTime: 2020-12-30 20:38:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\warranty\extendedManagement\extendedManagement.vue
-->
<template>
    <div>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('warrantyManage.extension_code')}}</span>
                <el-input v-model="extensionCode" style="width:160px;" :placeholder="$t('pleaseInput')" ></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.useStatus')}}</span>
                <el-select v-model="status" filterable :placeholder="$t('index.selectStates')" clearable >
                    <el-option
                        v-for="item in statusList"
                        :key="item.text"
                        :label="item.text"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('pay.orderNumber')}}</span>
                <el-input v-model="paypalOrderId" style="width:160px;" :placeholder="$t('pleaseInput')" ></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
            
        </div>
        <div class="button-box">
            <el-button   type="primary" slot="reference"  icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setVisibleAdd',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                    :confirm-button-text="$t('sure')"
                    :cancel-button-text="$t('cancel')"
            :title="$t('index.delete_confirm')+'?'"
            @confirm='delayCodeDeleteBatch()'
            >
                <el-button   type="primary" slot="reference"  icon='el-icon-download' class="marginR10" >{{$t('delete')}}</el-button>
            </el-popconfirm>
            <el-button   type="primary" slot="reference"  icon='el-icon-download' class="marginR10" @click="downLoadModal">{{$t('download.templates')}}</el-button>
            <el-button   type="primary" slot="reference"  icon='el-icon-upload2' class="marginR10" @click="()=>{$store.commit('setNewVisibleEdit',true)}">{{$t('import')}}</el-button>
            <el-button   type="primary" slot="reference"  icon='el-icon-download' class="marginR10" @click="()=>{$store.commit('setNewVisibleRemark',true)}">{{$t('export')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' :select='true' @selection-change="handleSelectionChange($event)">
            <template #status='{data}'>
                {{comm.returnCode(statusList,data.status,'id','text')}}
            </template>
            <template #option='{data}'>
                <div class="option-box">
                    <el-popconfirm
                            :confirm-button-text="$t('sure')"
                            :cancel-button-text="$t('cancel')"
                        :title="$t('index.delete_item_confirm')"
                        @confirm='deleteRow(data.sid)'
                    >
                        <el-button class="marginR10" type="" slot="reference" icon='el-icon-delete' :title="$t('delete')"></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' v-if='visibleAdd'></add>
        <importModal @uploadData='query' v-if='newVisibleEdit'></importModal>
        <exportModal @uploadData='query' v-if='newVisibleRemark'></exportModal>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import add from './add.vue'
import importModal from './importModal.vue'
import exportModal from './exportModal.vue'

export default {
    components: {
        baseTable,
        add,
        importModal,
        exportModal
    },
    props: {

    },
    data() {
        return {
            extensionCode:'',
            status:'',
            paypalOrderId:'',
            dictionary:[],
            loading:false,
            dataRows:[],
            selectDataList:[],
            column:[{
                title: this.$t('warrantyManage.extension_code'),
                value: 'code',
                slot: 'code',
            },
            {
                title: this.$t('extendedManagement.Years'),
                value: 'delayTime',
                slot: 'delayTime',
            },
            {
                title: this.$t('devWifi.useStatus'),
                value: 'status',
                slot: 'status',
            },
            {
                title: this.$t('pay.orderNumber'),
                value: 'paypalOrderId',
                slot: 'paypalOrderId',
            },{
                title: this.$t('createTime'),
                value: 'createTime',
                slot: 'createTime',
            },
            {
                title: this.$t('control'),
                value: 'option',
                slot: 'option',
            }],
            size:10,
            current:1,
            total:1,
            statusList:[{
                id:'0',
                text:this.$t('device.inverter.js_free'),
            },{
                id:'1',
                text:this.$t('sn.js_used'),
            }]
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        },
        newVisibleRemark(){
            return this.$store.state.sysStore.newVisibleRemark
        },
        newVisibleEdit(){
            return this.$store.state.sysStore.newVisibleEdit
        },
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.delayCodeGetPage()
    },
    methods: {
        downLoadModal(){
            this.comm.windowOpen('/resource/files/delayCodeTemplate.xls')
            // this.comm.windowOpen('/alarmPush/getAlarmTemplate')
        },
        async deleteRow(id){
            let res = await this.API.delayCodeDeleteBatch({
                ids:id
            })
            if(this.comm.showMsg(res.success)){
                this.delayCodeGetPage()
            }
        },
        async delayCodeDeleteBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res= await this.API.delayCodeDeleteBatch({
                ids:this.selectDataList.map(item =>{
                    return item.sid
                })
            })
            if(this.comm.showMsg(res.success)){
                this.delayCodeGetPage()
            }
        },
        async delayCodeGetPage(){
            this.loading = true
            let res = await this.API.delayCodeGetPage({
                size: this.size,
                current: this.current,
                code: this.extensionCode,
                status: this.status,
                paypalOrderId:this.paypalOrderId,
            })
            this.loading = false
            this.dataRows = res.rows
            this.total = res.total
        },
        query(){
            this.current = 1
            this.delayCodeGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.delayCodeGetPage()
        },
        handleCurrentChange(val) { 
          this.current = val
          this.delayCodeGetPage()
        },
        handleSelectionChange(val){
          this.selectDataList=val
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
